<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-27 11:29:02
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-08 17:07:03
 * @FilePath: \nien-vue3-admin\src\views\index\components\workNotice.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="work-notice">
    <card
      title="工作通知"
      :show-details="true"
      style="max-height: 700px; overflow: hidden;"
      @viewDetails="viewDetails"
    >
      <el-empty v-if="workList.length <= 0" description="暂无数据" :image-size="500"></el-empty>
      <el-table v-else :data="workList" style="width: 100%;">
        <el-table-column label="标题" width="180">
          <template #default="{ row }">
            <span class="dot"></span>
            {{ row.noticeTitle }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="noticeType"
          label="类型"
          width="180"
        >
          <template #default="{ row }">
            {{ typeList[row.noticeType] }}
          </template>
        </el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" label="内容">
          <template #default="{ row }">
            {{ row.noticeContent ? row.noticeContent.replace(/\<\/?p[^>]*>/gi, "") : "undefined" }}
          </template>
        </el-table-column>

        <el-table-column align="center" prop="createBy" label="创建人"></el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间">
          <template #default="{ row }">
            {{ row.createTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="{ row }">
            <el-button text @click="cellClick(row.id, true, row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </card>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import card from './card.vue'
import useWsStore from '@/store/modules/websocket'
import { queryById } from '@/api/home'
import useUserStore from '@/store/modules/user'
  
const router = useRouter()
const wsStore = useWsStore()
const userStore = useUserStore()

const typeList = reactive({
  1: '通知',
  2: '公告',
})
  
const workList = ref<any[]>([])

wsStore.send(wsStore.SIGN_MAP.WORK_NOTICE_PUSH)

// 工作通知
wsStore.onMessage({ sign: wsStore.SIGN_MAP.WORK_NOTICE_PUSH }, ({ data }) => {
  // console.log(data, '工作通知')
  workList.value = data.slice(0, 16)
})

const viewDetails = () => {
  router.push({
    path: '/system/noticeDetails/index.vue',
    query: {
      id: userStore.user.userId,
    },
  })
}

const cellClick = (id, flag, row) => {
  queryById({ id }).then(res => {
    if (flag) {
      router.push({
        path: '/system/noticeDetails/noticeListDetail',
        query: {
          rows: res.data,
          flag,
        },
      })
    }
    const index = workList.value.findIndex(item => item.id === id)
    workList.value.splice(index, 1, res.data)
  })
}
  
defineExpose({
  cellClick,
})
    
</script>

  <style lang="less" scoped>
  .work-notice /deep/ .el-card__body {
    padding: 0;
    .dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: var(--color);
      margin-right: 15px;
      border-radius: 50%;
    }
    .jobNotice {
      list-style-type: none;
      max-height: 660px;
      li {
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        cursor: pointer;
        .jobText {
          display: inline-block;
          width: 70%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .workTime {
          float: right;
          margin-right: 25px;
        }
        .createBy {
          margin-left: 100px;
        }
      }
      li::before {
        float: left;
        content: "●";
        margin-right: 5px;
        margin-bottom: -5px;
        color: var(--color);
      }
    }
  }
  
  </style>